<template>
  <view class="workbench-page">
    <view class="header">
      <text class="greeting">你好，{{ userName }}</text>
    </view>
    
    <view class="modules">
      <view class="module-section">
        <view class="section-title">核心功能</view>
        <view class="module-grid">
          <view 
            v-for="module in coreModules" 
            :key="module.id"
            class="module-item"
            @click="navigateTo(module.path)"
          >
            <view class="module-icon">{{ module.icon }}</view>
            <text class="module-name">{{ module.name }}</text>
          </view>
        </view>
      </view>
      
      <view class="module-section">
        <view class="section-title">ERP模块</view>
        <view class="module-grid">
          <view 
            v-for="module in erpModules" 
            :key="module.id"
            class="module-item"
            @click="navigateTo(module.path)"
          >
            <view class="module-icon">{{ module.icon }}</view>
            <text class="module-name">{{ module.name }}</text>
          </view>
        </view>
      </view>
      
      <view class="module-section">
        <view class="section-title">AI助手</view>
        <view class="module-grid">
          <view 
            v-for="module in aiModules" 
            :key="module.id"
            class="module-item"
            @click="navigateTo(module.path)"
          >
            <view class="module-icon">{{ module.icon }}</view>
            <text class="module-name">{{ module.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const user = uni.getStorageSync('user')
const userName = computed(() => user?.displayName || user?.username || '用户')

const coreModules = ref([
  { id: 1, name: '即时通讯', icon: '💬', path: '/pages/chat/chat' },
  { id: 2, name: '音视频通话', icon: '📞', path: '/pages/call/call' },
  { id: 3, name: '文件管理', icon: '📁', path: '/pages/files/files' },
  { id: 4, name: '日程管理', icon: '📅', path: '/pages/calendar/calendar' }
])

const erpModules = ref([
  { id: 5, name: '智能仓储', icon: '📦', path: '/pages/warehouse/warehouse' },
  { id: 6, name: '智能物流', icon: '🚚', path: '/pages/logistics/logistics' },
  { id: 7, name: '智能采购', icon: '🛒', path: '/pages/procurement/procurement' },
  { id: 8, name: '智能制造', icon: '🏭', path: '/pages/manufacturing/manufacturing' }
])

const aiModules = ref([
  { id: 9, name: 'AI客服', icon: '🤖', path: '/pages/ai/customer-service' },
  { id: 10, name: '会议助手', icon: '📝', path: '/pages/ai/meeting' },
  { id: 11, name: '销售助手', icon: '💼', path: '/pages/ai/sales' },
  { id: 12, name: '数字孪生', icon: '🔮', path: '/pages/digital-twin/dashboard' }
])

const navigateTo = (path: string) => {
  uni.navigateTo({
    url: path,
    fail: () => {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.workbench-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx 80rpx;
  color: white;
}

.greeting {
  font-size: 44rpx;
  font-weight: bold;
}

.modules {
  margin-top: -40rpx;
  padding: 0 30rpx;
}

.module-section {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
}

.module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.module-icon {
  width: 100rpx;
  height: 100rpx;
  font-size: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
  border-radius: 20rpx;
  margin-bottom: 16rpx;
}

.module-name {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}
</style>
